<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改线路配置')" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-gateways-edit" th:object="${ccGateways}">
            <input name="id" th:field="*{id}" type="hidden">

            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required" th:text="#{gateways.form.gwName}"></label>
                    <div class="col-sm-8">
                        <input name="gwName" th:field="*{gwName}" class="form-control" type="text" required readonly>
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required" th:text="#{gateways.form.purpose}"></label>
                    <div class="col-sm-8">
                        <select name="purpose" th:field="*{purpose}" class="form-control m-b">
                            <option value="0" th:text="#{gateways.form.purpose.abandoned}"></option>
                            <option value="1" th:text="#{gateways.form.purpose.toolbar}"></option>
                            <option value="2" th:text="#{gateways.form.purpose.outgoing}"></option>
                            <option value="3" th:text="#{gateways.form.purpose.unlimited}"></option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required" th:text="#{gateways.form.profileName}"></label>
                    <div class="col-sm-8">
                        <select name="profileName" class="form-control m-b" th:field="*{profileName}">
                            <option th:each="profileData:${profileList}" th:value="${profileData.profileName}" th:text="${profileData.profileName}" ></option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required" th:text="#{gateways.form.caller}"></label>
                    <div class="col-sm-8">
                        <input name="caller" th:field="*{caller}" class="form-control" type="text" required>
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label" th:text="#{gateways.form.calleePrefix}"></label>
                    <div class="col-sm-8">
                        <input name="calleePrefix" th:field="*{calleePrefix}" class="form-control" type="text">
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required" th:text="#{gateways.form.gwAddr}"></label>
                    <div class="col-sm-8">
                        <input name="gwAddr" th:field="*{gwAddr}" class="form-control" type="text" required>
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required" th:text="#{gateways.form.codec}"></label>
                    <div class="col-sm-8">
                        <input name="codec" th:field="*{codec}" class="form-control" type="text" required>
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required" th:text="#{gateways.form.gwDesc}"></label>
                    <div class="col-sm-8">
                        <input name="gwDesc" th:field="*{gwDesc}" class="form-control" type="text" required>
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required" th:text="#{gateways.form.maxConcurrency}"></label>
                    <div class="col-sm-8">
                        <input name="maxConcurrency" th:field="*{maxConcurrency}" class="form-control" type="text" required>
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required" th:text="#{gateways.form.register}"></label>
                    <div class="col-sm-8">
                        <select id="register" name="register" class="form-control m-b">
                            <option value="0" th:field="*{register}" th:text="#{gateways.form.label.register0}"></option>
                            <option value="1" th:field="*{register}" th:text="#{gateways.form.label.register1}"></option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 register-param">
                <div class="form-group">
                    <label class="col-sm-3 control-label" th:text="#{gateways.form.authUsername}"></label>
                    <div class="col-sm-8">
                        <input name="authUsername" th:field="*{authUsername}" class="form-control" type="text">
                    </div>
                </div>
            </div>
            <div class="col-xs-12 register-param">
                <div class="form-group">
                    <label class="col-sm-3 control-label" th:text="#{gateways.form.authPassword}"></label>
                    <div class="col-sm-8">
                        <input name="authPassword" th:field="*{authPassword}" class="form-control" type="text">
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required" th:text="#{gateways.form.priority}"></label>
                    <div class="col-sm-8">
                        <input name="priority" th:field="*{priority}" class="form-control" type="text" required>
                    </div>
                </div>
            </div>
        </form>

        <div class="row" ></div>
        <div class="row" >
            <div class="btn-group-sm" id="toolbar" role="group">
                <a class="btn btn-success" onclick="addRows()">
                    <i class="fa fa-plus"></i> <span th:text="#{gateways.form.addRows}"></span>
                </a>
            </div>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <script th:inline="javascript">
        var defaultRegister = [[${ccGateways.register}]];
        var custConfigs = [[${ccGateways.configs}]];
        var paramSize = 0;
        var prefix = ctx + "cc/gateways";
        $(function() {
            if (defaultRegister == 1) {
                $(".register-param").show();
            } else {
                $(".register-param").hide();
            }

            // 使用JSON.parse()方法解析JSON字符串
            if (custConfigs) {
                console.log(custConfigs)
                var baseConfigsHtml = '';
                const configs = JSON.parse(custConfigs);
                // 遍历custConfigs对象，打印每个键和值
                for (const key in configs) {
                    if (configs.hasOwnProperty(key)) {
                        const value = configs[key];
                        baseConfigsHtml += '<div className="col-xs-12">';
                        baseConfigsHtml += '<div class="form-group">';
                        baseConfigsHtml += '<label class="col-sm-3 control-label">' + key + '</label>'
                        baseConfigsHtml += '<div class="col-sm-8">'
                        baseConfigsHtml += '<input class="config-value form-control" type="text" id="' + key + '" value="' + value + '" />'
                        baseConfigsHtml += '</div>';
                        baseConfigsHtml += '</div>';
                        baseConfigsHtml += '</div>';
                        paramSize ++;
                    }
                }
                $('#form-gateways-edit').append(baseConfigsHtml);
            }

        });

        $("#form-gateways-edit").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                var configs = {}
                var formData = $('#form-gateways-edit').serializeArray();
                // 已存在的配置
                $('input.config-value').each(function() {
                    var configKey = $(this).attr('id');
                    var configValue = $(this).val().trim();
                    configs[configKey] = configValue;
                });
                // 添加的配置
                $('input.new-config-name').each(function() {
                    var newConfigId = $(this).attr('id');
                    var configKey = $(this).val().trim();
                    var configValue = $("#" + newConfigId + "_value").val().trim();
                    configs[configKey] = configValue;
                });
                formData.push({"name": "configs", "value": JSON.stringify(configs)})
                $.operate.save(prefix + "/edit", formData);
            }
        }

        $("#register").change(function(event){
            var register = $(event.target).val();
            if (register == 1) {
                $(".register-param").show();
            } else {
                $(".register-param").hide();
            }
        });


        // 追加一行配置
        function addRows(){
            paramSize ++;
            var addConfigs = '';
            addConfigs += '<div className="row">';
            addConfigs += '<div class="col-sm-12">';
            addConfigs += '<div class="col-sm-3"><input class="new-config-name form-control" type="text" value="" id="newConfig_' + paramSize + '" placeholder="' + i18n('gateways.form.placeholder.name') + '"/></div><div class="col-sm-8"><input class="new-config-value form-control" type="text" id="newConfig_' + paramSize + '_value" value="" placeholder="' + i18n('gateways.form.placeholder.value') + '"/></div>';
            addConfigs += '</div>';
            addConfigs += '</div>';
            $('#form-gateways-edit').append(addConfigs);
        }
    </script>
</body>
</html>